{% extends 'mobile_base_frame.html'%}
{% load i18n %}

{% block page%}
<div data-role="page" id="report_page">
<script type="text/javascript" src="{{ MEDIA_URL }}/wap/mobile_table_horizontal.js"></script>
<script>
   $(document).on("pageinit",function(){
       $('.ui-table-columntoggle-btn').remove();
       {% autoescape off%}
       var urlparams = {{urlparams|safe}};
       var $p = $(document);
       var m_option={{grid_option|safe}};
       m_option["params"]=urlparams;
       $("#table-reflow",$p).mobileGrid(m_option);
      {% endautoescape%}
   });
</script>

<div data-role="header" data-position="fixed" data-theme="b" data-inset="false">
   <a href="index.html" data-role="button" data-icon="back" data-rel="back" data-corners="true" data-iconpos="notext"></a>
   <h1>{{title}}</h1>
   <a href="#info" data-rel="popup" data-role="button" data-icon="user" data-iconpos="notext" class="ui-btn-right">Grid</a>
</div>
<div data-role="content" id="id_content" >
      {% if urlparams %}
      <div id="query" class="wap-query-conditions">
         {% autoescape off%}
         {% for c in urlparams %}
            <p>{{c.name|wap_condition_filter}}:{{c.value}}</p>
         {% endfor %}
         {% endautoescape%}
      </div>
      {% endif%}
      <div id="data-div" jqm-c="true">
         <table data-role="table" id="table-reflow" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive"></table>
      </div>
      <div id="loader" class="wap-loader-img" style="display:none"><img src="{{MEDIA_URL}}/wap/css/images/ajax-loader.gif"></img></div>
      <div id="more">
        <a href="#" data-role="button" data-icon="add" data-corners="false">{% trans '更多' %}</a>
      </div>
      <div data-role="popup" id="help_txt">
          <p>{{title}}<p>
      </div>
      <div data-role="popup" id="info" >
           <ul data-role="listview">
             <li data-icon="false"><a href="#" data-icon="false">{% trans '姓名' %}:{{employee.EName}}</a></li>
             <li data-icon="false"><a href="#" >{% trans '工号' %}:{{employee.PIN}}</a></li>
             <li data-icon="false"><a href="#" id="logout">{% trans '退出' %}</a></li>
           </ul>
      </div>
      <div data-role="popup" id="event_info">
           <p>© 2014 中控科技</p>
      </div>
      </div><!-- /content -->
      <div data-role="footer" data-theme="b">
        <div data-role="navbar" data-theme="b">
            <ul>
                <li><a href="#help_txt" data-rel="popup" data-icon="info" data-theme="b" ></a></li>
                <!--<li><a href="#event_info" data-rel="popup" data-icon="star" data-theme="b"></a></li>-->
                <li><a href="/{{app_label}}/{{app_menu}}/UI/" data-icon="home" data-theme="b"></a></li>
            </ul>
        </div><!-- /navbar -->
      </div>
</div>
{% endblock%}